<!--输入框-->
<template>
  <label @click.stop>
    <el-date-picker ref="input" size="small" :type="type"
                    v-model="valueModel" :format="format" :value-format="format"
                    @change="handlerChange"></el-date-picker>
    <span v-if="validator" v-show="validator.valid === false" class="text-red">{{ validator.message }}</span>
  </label>
</template>

<script>

/**
 * 表内输入组件
 */
export default {
    name: 'TableDate'
    , props: {
        // 输入框类型
        type: {type: String, default: 'date'}
        // vue行级数据
        , row: {type: Object}
        // 值字段名
        , property: {type: String}
        // 值字段名
        , value: {type: [String, Number]}
        // 值变化回调，返回数据变化之后的行对象
        , change: {type: Function}
        // 数据格式化
        , format: {type: String, default: 'yyyy-MM-dd'}
    }, data() {
        return {
            // 值字段名
            valueModel: undefined
            // 数据验证清空
            , validator: {
                // 是否有效
                valid: undefined
                // 错误信息
                , message: ''
            }
        }
    }, created() {
        // 必须在数据加载前创建 $validators 对象
        if (this.row.$validators) {
            const $valid = this.row.$validators;
            this.validator = $valid[this.property];
        }
    }, watch: {
        value: {
            handler: function (val) {
                this.valueModel = val;
            }
            , immediate: true
        }
    }, methods: {
        /**
         * 值变换事件
         */
        handlerChange: function (val) {
            try {
                let name = this.property;
                // 返回 row 对象，修改成功，直接修改 row 的字段，而不需要刷新整个表格
                this.change('$edit', this.row, {field: name, value: val})
            } catch (e) {
                // rollback
                this.valueModel = this.value;
            }
        }
    }
}
</script>